$fontList: 
12,
14,
16,
18,
20,
22,
24,
26,
28,
30,
32,
34,
36,
38,
40,
42,
44,
46,
48,
50,
56,
60,
62,
64,
66,
68,
70,
72,
76,
78,
80,
82,
88,
92,
98,
110,
112,
118,
120,
124,
128,
130,
132,
138,
140,
250,
162,
220,
260,
650;
$spaceList:
0,
1,
2,
6,
8,
10,
12,
14,
16,
20,
23,
28,
33,
38,
42,
52,
54,
61,
68,
72,
80,
82,
84,
86,
90,
92,
94,
96,
98,
104,
106,
100,
110,
112,
118,
120,
124,
126,
128,
132,
136,
138,
140,
144,
148,
152,
156,
160,
162,
166,
172,
176,
180,
182,
186,
190,
192,
200,
206,
208,
210,
216,
224,
228,
236,
240,
242,
248,
258,
266,
280,
288,
292,
298,
300,
312,
327,
339,
344,
345,
358,
375,
380,
388,
395,
398,
400,
415,
444,
460,
470,
480,
490,
510,
518,
521,
540,
560,
574,
580,
590,
600,
621,
650,
700,
750,
800,
900;

@each $item in $fontList {
  $index: index($fontList, $item);

  .font-#{$item} {
    font-size: $item + rpx;
  }

  .leading-#{$item} {
    line-height: $item + rpx;
  }

  .h-#{$item} {
    height: $item + rpx;
  }
	
	.lh-#{$item} {
	  line-height: $item + rpx;
	}

  .w-#{$item} {
    width: $item + rpx;
  }
}

@each $item in $spaceList {
  $index: index($spaceList, $item);
	
  .h-#{$item} {
    height: $item + rpx;
  }
	
	.max-h-#{$item} {
    max-height: $item + rpx;
  } 
	
	.min-h-#{$item} {
    min-height: $item + rpx;
  }
	
	.lh-#{$item} {
	  line-height: $item + rpx;
	}

  .w-#{$item} {
    width: $item + rpx;
  }
	
  .max-w-#{$item} {
    max-width: $item + rpx;
  }
	
	.min-w-#{$item} {
    min-width: $item + rpx;
  }
	
}

.font-bold {
  font-weight: bold;
}
.font-w500 {
  font-weight: 500;
}
.font-normal{
	font-weight: normal;
}
.text-center{
	text-align: center;
}

.text-left{
	text-align: left;
}

.text-right{
	text-align: right;
}

.line-through {
  text-decoration: line-through;
}
.underline {
  text-decoration: underline;
}

.lh-1{
	line-height: 1;
}

.w-full {
  width: 100% !important;
}

.h-full {
  height: 100%;
}

.max-w-full{
	max-width: 100%;
}
.max-h-full{
	max-height: 100%;
}
.min-w-full{
	min-width: 100%;
}
.min-h-full{
	min-height: 100%;
}